<template>
  <footer>
    <ul>
      <!--vue-router 声明式导航 -->
      <li>
        <router-link to="/films" active-class="beeactive">
          <li class="iconfont icon-pay">电影</li>
        </router-link>
      </li>
      <li>
        <router-link to="/cinemas" active-class="beeactive">
          <li class="iconfont icon-type">影院</li>
        </router-link>
      </li>
      <li>
        <router-link to="/register" active-class="beeactive">
          <li class="iconfont icon-addressbook">我的</li>
        </router-link>
      </li>
    </ul>
  </footer>
</template>
<script>
export default {};
</script>

<style lang="scss" scoped>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.7222rem;
  background: white;
  z-index: 100;

  ul {
    display: flex;
    li {
      flex: 1;
      line-height: 1.3889rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      font-size: 1.1111rem;
    }
  }
}

.beeactive{
  color: red;
}
</style>
